<template>
	<view class="evaluate-list">
		<!-- 评价统计 -->
		<view class="evaluate-stats">
			<!-- 	<view class="stats-left">
				<text class="stats-score">4.8</text>
				<text class="stats-text">商家评分</text>
			</view> -->
			<view class="stats-right">
				<view class="stats-item">
					<text>综合评分</text>
					<star-rating :value="starValue" :disabled="true" :showText="false"></star-rating>
					<text class="stats-value">{{averageRating}}</text>
				</view>
				<!--      <view class="stats-item">
          <text>物流服务</text>
          <star-rating :value="5" :disabled="true" :showText="false"></star-rating>
          <text class="stats-value">4.8</text>
        </view>
        <view class="stats-item">
          <text>服务态度</text>
          <star-rating :value="5" :disabled="true" :showText="false"></star-rating>
          <text class="stats-value">4.7</text>
        </view> -->
			</view>
		</view>

		<!-- 评价标签 -->
		<view class="evaluate-tags">
			<scroll-view scroll-x class="tag-scroll">
				<view v-for="(tag, index) in tags" :key="index" class="tag-item"
					:class="{ active: activeTag === tag.id }" @click="activeTagChange(tag.id)">
					{{ tag.name }}
				</view>
			</scroll-view>
		</view>

		<!-- 评价列表 -->
		<view class="evaluate-items">
			<view v-for="(item, index) in evaluateList" :key="index" class="evaluate-item">
				<view class="item-header">
					<image :src="imagePrefix +  item.userAvatar" class="user-avatar"></image>
					<view class="user-info">
						<text
							class="user-name">{{ item.isAnonymous === 1 ? '匿名用户' : (item.userNickname || '匿名用户')}}</text>
						<star-rating :value="item.rating" :disabled="true" :showText="false"></star-rating>
						<text class="user-name">{{ item.title ||"" }}</text>
					</view>
				</view>

				<view class="item-content">
					<text>{{ item.content }}</text>
				</view>

				<view class="item-images" v-if="item.images">
					<!-- 处理多张图片（逗号分隔）或单张图片的情况 -->
					<template v-if="item.images.includes(',')">
						<image v-for="(img, imgIndex) in item.images.split(',')" :key="imgIndex" :src="img"
							mode="aspectFill" class="evaluate-image"
							@click="previewImage(item.images.split(','), imgIndex)"></image>
					</template>
					<template v-else>
						<image :src="item.images" mode="aspectFill" class="evaluate-image"
							@click="previewImage([item.images], 0)"></image>
					</template>
				</view>

				<!-- 其他信息（时间、点赞等） -->
				<view class="flex justify-between bg-gray-100 p-4" style="margin-bottom: 36rpx;" v-if="item.rating">
					<text class="evaluate-time">{{ item.createTime }}</text>
					<view class="like" @click="likeReview(item.id)">
						<uni-icons type="heart" :color="item.liked ? 'red' : '#991113'" size="30rpx"></uni-icons>
						<text>{{ item.likeCount }}</text>
					</view>
				</view>

				<view class="item-reply" v-if="item.replyContent">
					<text class="reply-label">商家回复：</text>
					<text class="reply-content">{{ item.replyContent }}</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import starRating from '@/components/star-rating/star-rating.vue'
	import {
		getReviewsList,
		editLikeCount,
		averageRating
	} from '@/api/system/reviews.js'

	export default {
		components: {
			starRating
		},
		data() {
			return {
				averageRating: "",
				starValue:"",
				imagePrefix: this.$imagePrefix,
				activeTag: 0,
				tags: [{
						id: 0,
						name: '全部',
					},
					{
						id: 5,
						name: '好评',
					},
					{
						id: 3,
						name: '中评',
					},
					{
						id: 1,
						name: '差评',
					}
				],
				evaluateList: []
			}
		},
		onLoad() {
			this.getReviewsList()
			this.getAverageRating()
		},

		methods: {

			getAverageRating() {
				averageRating().then(res => {
					console.log("平均分：", res);
					this.averageRating = res.data
					this.starValue =this.averageRating
					console.log(this.starValue);
				})
			},
			//选中评价等级
			activeTagChange(id) {
				this.activeTag = id
				this.getReviewsList(id)
			},

			//获取评价列表
			getReviewsList(id) {
				const ratingData = {
					"rating": id
				}
				getReviewsList(ratingData).then(res => {
					console.log(res.data);
					this.evaluateList = res.data
				})
			},
			//查看图片
			previewImage(images, current) {
				// 统一处理为数组形式
				const imageUrls = Array.isArray(images) ?
					images.map(img => 'https://localhost/dev-api' + img) : ['https://localhost/dev-api' + images];
				uni.previewImage({
					current,
					urls: images
				})
			},
			//增加点赞数
			likeReview(id) {
				console.log('id:', id);
				const data = {
					"id": id
				}
				editLikeCount(data).then(res => {
					console.log('likeC：', res);
					this.getReviewsList()
				})
			}
		}
	}
</script>

<style scoped>
	.evaluate-list {
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.evaluate-stats {
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.stats-left {
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.stats-score {
		font-size: 60rpx;
		color: #f40;
		font-weight: bold;
		line-height: 1;
	}

	.stats-text {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.stats-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.stats-item {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #333;
	}

	.stats-item text:first-child {
		width: 120rpx;
	}

	.stats-value {
		margin-left: 20rpx;
		color: #f40;
		font-size: 60rpx;
		font-weight: bold;
	}

	.evaluate-tags {
		background-color: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}

	.tag-scroll {
		white-space: nowrap;
		width: 100%;
	}

	.tag-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		margin: 0 10rpx;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #666;
	}

	.tag-item.active {
		background-color: #007AFF;
		color: #fff;
	}

	.evaluate-items {
		background-color: #fff;
	}

	.evaluate-item {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.user-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.user-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.user-name {
		font-size: 26rpx;
		color: #333;
	}

	.evaluate-time {
		font-size: 24rpx;
		color: #999;
	}

	.item-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 20rpx;
	}

	.item-images {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.evaluate-image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
	}

	.item-reply {
		background-color: #f7f7f7;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}

	.reply-label {
		font-size: 26rpx;
		color: #f40;
	}

	.reply-content {
		font-size: 26rpx;
		color: #666;
	}
</style>